<template>
  <n-card class="mt-12" segmented>
    <template #header>
      <span class="title">{{ title }}</span>
    </template>
    <template #header-extra>
      <n-button strong secondary circle type="primary" @click="handleAdd()" v-if="canEdit">
        <i class="i-fe:plus"></i>
      </n-button>
    </template>
    <template #default>
      <slot />
    </template>
  </n-card>
</template>

<script setup>
const props = defineProps({
  title: {
    default: '标题',
  },
  onAdd: {
    type: Function,
    default: () => {},
  },
  canEdit: {
    type: Boolean,
    default: true
  }
})

function handleAdd() {
  props.onAdd()
}
</script>

<style scoped>
.title {
  font-weight: 600;
  font-size: 20px;
  color: #333;
}
</style>
